<template>
    <div>
      <div>
        <el-select size="medium" class="selectInput" v-model="rentState" placeholder="请选择商品状态" clearable>
          <el-option v-for="(item, index) in status" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
        <el-button
          size="medium" icon="el-icon-circle-plus-outline" type="success" @click="handleStatus">查询
        </el-button>
      </div>
      <div>
        <el-table
          border
        ref="tableData"
        :data="tableData"
        style="width: 100%"
        :default-sort = "{prop: 'createTime', order: 'descending'}">
        <el-table-column
        prop="rentId"
        label="租赁编号"
        sortable
        width="110">
        </el-table-column>
        <el-table-column
          prop="goodId"
          label="商品编号"
          sortable
          width="110">
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="50">
        </el-table-column>
        <el-table-column
          prop="singlePrice"
          label="价格/小时"
          width="90">
          <template slot-scope="scope">
            {{scope.row.singlePrice==null?'-':scope.row.singlePrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="dayPrice"
          label="价格/天"
          width="80">
          <template slot-scope="scope">
            {{scope.row.dayPrice==null?'-':scope.row.dayPrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="tolRentPrice"
          label="总价"
          width="60">
        </el-table-column>
        <el-table-column
          prop="rentState"
          label="租赁状态"
          width="80">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.rentState=='0'?'danger':''">
              {{scope.row.rentState=='0'?'未发货':scope.row.rentState=='1'?'派送中':'已收货'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="paystate"
          label="支付状态"
          width="80">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.paystate=='0'?'danger':'success'">
              {{scope.row.paystate=='0'?'未付款':'已支付'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="starttime"
          label="租赁开始时间"
          sortable
          width="170">
        </el-table-column>
        <el-table-column
          prop="endtime"
          label="租赁结束时间"
          sortable
          width="170">
        </el-table-column>
        <el-table-column
          prop="rentTime"
          label="下单时间"
          width="170">
        </el-table-column>
        <el-table-column label="操作" width="100"
                         fixed="right">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       plain
                       @click="showEditView(scope.$index, scope.row)">发货
              <i class="el-icon-truck el-icon--right"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!--弹窗-->
      <el-dialog
        title="租赁信息确认"
        :visible.sync="dialogFormVisible"
        width="1000px">
        <!--租赁信息-->
        <el-descriptions class="margin-top" title="用户信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              租赁方用户ID
            </template>
            {{tableList.userId}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              租赁方用户名
            </template>
            {{userName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品ID
            </template>
            {{tableList.goodId}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              数量
            </template>
            {{tableList.number}}
          </el-descriptions-item>
          <el-descriptions-item v-if="tableList.singlePrice">
            <template slot="label">
              价格/小时
            </template>
            {{tableList.singlePrice}}
          </el-descriptions-item>
          <el-descriptions-item v-if="tableList.dayPrice">
            <template slot="label">
              价格/天
            </template>
            {{tableList.dayPrice}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              总价
            </template>
            {{tableList.tolRentPrice}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              支付状态
            </template>
            <el-tag size="small" :type="tableList.paystate=='0'?'danger':tableList.paystate=='2'?'':'success'">
              {{tableList.paystate==0?'未支付':'已支付'}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              发货状态
            </template>
            <el-tag size="small" :type="tableList.rentState=='0'?'danger':tableList.rentState=='2'?'':'success'">
              {{tableList.rentState==0?'未发货':tableList.rentState==1?'已发货':'已收货'}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              租赁时间段
            </template>
            {{tableList.starttime}}——{{tableList.endtime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              下单时间
            </template>
            {{tableList.rentTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              配送地址
            </template>
            {{detailAddress}}
          </el-descriptions-item>
        </el-descriptions>
        <!--商品信息-->
        <el-descriptions class="margin-top" style="margin-top: 20px" title="商品信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              商品名称
            </template>
            {{goodList.goodName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品实物图
            </template>
            <template>
              <el-image style="width: 40px" :src="goodList.imgurl" :preview-src-list="[goodList.imgurl]">
              </el-image>
            </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品类型
            </template>
            {{goodList.category}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品描述
            </template>
            {{goodList.description}}
          </el-descriptions-item>
          <el-descriptions-item v-if="tableList.singlePrice">
            <template slot="label">
              价格/小时
            </template>
            {{goodList.rentPriceHour}}
          </el-descriptions-item>
          <el-descriptions-item v-if="tableList.dayPrice">
            <template slot="label">
              价格/天
            </template>
            {{goodList.rentPriceDay}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              品牌
            </template>
            {{goodList.brand}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="suggest">
          <div style="margin-bottom: 10px;margin-top: 50px;margin-left: 450px">
            修改商品状态：
            <el-select v-model="deliver.rentState" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button style="margin-left: 20px"  @click="dialogFormVisible=false" type="danger">取消</el-button>
            <el-button type="success" @click="doUpdate">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'HanderGood',
    data() {
      return {
        detailAddress:undefined,
        tableData: [],
        dialogFormVisible:false,
        tableList:{},
        goodList:{},
        userName:'',
        rentState:'',
        deliver:{
          rentId:'',
          rentState:'',
          dayPrice:'',
          singlePrice:'',
        },
        status:[{
          "label": "未发货",
          "value": '0'
        }, {
          "label": "派送中",
          "value": '1'
        }],
        options: [{
          value: '0',
          label: '未发货'
        }, {
          value: '1',
          label: '派送中'
        }],
      }
    },
    mounted () {
      this.initTable();

    },
    methods: {
      doUpdate(){
        if (this.deliver.rentState){
          console.log(this.deliver.rentState)
          console.log(this.deliver.rentId)
          // 修改商品状态
          this.putRequest('/rent/data/updateRent',this.deliver).then(resp=>{
            if (resp){
              this.dialogFormVisible=false;
              this.initTable();
              this.$notify.success({ title: '成功', message: '更新发货状态成功' });
            }
          })
        } else {
          this.$notify.info({ title: '消息', message: '请输入发货状态' });
        }
      },
      showEditView(index,data){
        Object.assign(this.tableList,data);
        this.deliver.rentId=data.rentId;
        if(data.dayPrice){
          this.deliver.dayPrice=data.dayPrice
        }
        if(data.singlePrice){
          this.deliver.singlePrice=data.singlePrice
        }
        this.dialogFormVisible=true;
        this.postRequest('/goodList/selectById?goodId='+this.tableList.goodId).then(resp => {
          if (resp) {
            console.log(resp);
            this.goodList=resp;
          }
        })
        this.postRequest('/personal/data/userById/'+this.tableList.userId).then(resp => {
          if (resp) {
            console.log(resp);
            this.userName=resp;
          }
        })
        this.getRequest('/rent/addressById/'+data.orderAddress).then(resp => {
          if (resp) {
            console.log(resp);
            this.detailAddress=resp.takeAddres;
          }
        })
      },
      handleStatus(){
        this.initTable();
      },
      initTable () {
        const user = JSON.parse(window.sessionStorage.getItem('user'));
        let myUseId = parseInt(user.userId);
        if (this.rentState===''){
          let url = '/rent/data/rentList/?myUseId='+myUseId+'&&rentState='+'0';
          this.postRequest(url).then(resp => {
            if (resp) {
              console.log(resp);
              this.tableData=resp;
            }
          })
        } else {
            let url = '/rent/data/rentList/?myUseId='+myUseId+'&&rentState='+this.rentState;
            this.postRequest(url).then(resp => {
              if (resp) {
                console.log(resp);
                this.tableData=resp;
              }
            })
        }
      }
    }
  }
</script>

<style scoped>
  .selectInput{
    width: 220px;
    margin: 10px 10px 10px 15px;
  }

</style>
